<section class="template-box">
  <h4>Single Selection<!--单选--></h4>
  <div class="row">
    <div class="col-md-5">
      <h5>Use templates only for lists<!--只在列表使用模板--></h5>
      <d-select [options]="singleOptions" [filterKey]="'name'" [(ngModel)]="currentOption4" [placeholder]="'Search'">
        <ng-template let-option="option" let-filterKey="filterKey">
          <span title="Do you agree? {{ option[filterKey] }}"> Do you agree? {{ option[filterKey] }} </span>
        </ng-template>
      </d-select>

      <h5>Use the same template in the list and selected items<!--在列表和选中项使用相同模板--></h5>
      <d-select
        [options]="singleOptions"
        [filterKey]="'name'"
        [(ngModel)]="currentOption4"
        [placeholder]="'Search'"
        [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
      >
        <ng-template let-option="option" let-filterKey="filterKey">
          <span title="Do you agree? {{ option[filterKey] }}"> Do you agree? {{ option[filterKey] }} </span>
        </ng-template>
      </d-select>

      <h5>Use different templates in lists and selected items<!--在列表和选中项使用不同模板--></h5>
      <d-select
        [options]="singleOptions"
        [filterKey]="'name'"
        [(ngModel)]="currentOption4"
        [placeholder]="'Search'"
        [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
      >
        <ng-template let-option="option" let-filterKey="filterKey" let-position="position">
          <ng-container *ngIf="position === 'list'">
            <span title="Do you agree? {{ option[filterKey] }}"> Do you agree? {{ option[filterKey] }} </span>
          </ng-container>
          <ng-container *ngIf="position === 'result'">
            <span title="option['specialContent']"> {{ option['specialContent'] }}</span>
          </ng-container>
        </ng-template>
      </d-select>
    </div>
  </div>
  <div class="row">
    <div class="col-md-5">
      <pre>Current Select: {{ currentOption4 | json }}</pre>
    </div>
  </div>
</section>
<br />
<section>
  <h4>Multiple Selection<!--多选--></h4>
  <div class="row">
    <div class="col-md-5">
      <h5>Use templates only for lists<!--只在列表使用模板--></h5>
      <d-select [options]="multipleOptions" [filterKey]="'name'" [(ngModel)]="currentOption5" [placeholder]="'Search'" [multiple]="true">
        <ng-template let-option="option" let-filterKey="filterKey" let-checked="checked">
          <ng-container *ngIf="!checked">[ ]</ng-container>
          <ng-container *ngIf="checked">[x]</ng-container>
          Do you agree {{ option[filterKey] }} ?
        </ng-template>
      </d-select>

      <h5>Use different templates in lists and selected items<!--在列表和选中项使用不同模板--></h5>
      <d-select
        [options]="multipleOptions"
        [filterKey]="'name'"
        [(ngModel)]="currentOption5"
        [placeholder]="'Search'"
        [multiple]="true"
        [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
      >
        <ng-template let-option="option" let-filterKey="filterKey" let-position="position" let-checked="checked">
          <ng-container *ngIf="position === 'result'">
            <ng-container *ngIf="option?.length === multipleOptions.length"> Agree With All</ng-container>
            <ng-container *ngIf="option?.length !== multipleOptions.length">
              Agree with
              <ng-container *ngFor="let op of option; let index = index">
                <ng-container *ngIf="index !== 0">, </ng-container>{{ op[filterKey] }} </ng-container
              >.
              <!--TODO-->
            </ng-container>
          </ng-container>
          <ng-container *ngIf="position === 'list'">
            <ng-container *ngIf="!checked">[ ]</ng-container>
            <ng-container *ngIf="checked">[x]</ng-container>
            Do you agree with {{ option[filterKey] }} ?
          </ng-container>
        </ng-template>
      </d-select>
      <h5>
        Use different templates for lists and selected items, and in some cases use built-in templates.<!--在列表和选中项使用不同模板， 某些情况下使用内置模板-->
      </h5>
      <d-select
        [options]="multipleOptions"
        [filterKey]="'name'"
        [(ngModel)]="currentOption5"
        [placeholder]="'Search'"
        [multiple]="true"
        [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
      >
        <ng-template let-option="option" let-filterKey="filterKey" let-position="position" let-checked="checked" let-template="template">
          <ng-container *ngIf="position === 'result'">
            <ng-container *ngIf="option?.length === multipleOptions.length">Agree With All</ng-container>
            <ng-container *ngIf="option?.length !== multipleOptions.length">
              Agree with
              <ng-container *ngFor="let op of option; let index = index">
                <ng-container *ngIf="index !== 0">, </ng-container>{{ op[filterKey] }}</ng-container
              >.
            </ng-container>
          </ng-container>
          <ng-container *ngIf="position === 'list'">
            <ng-template
              [ngTemplateOutlet]="template"
              [ngTemplateOutletContext]="{
                option: option,
                checked: checked,
                filterKey: filterKey
              }"
            ></ng-template>
          </ng-container>
        </ng-template>
      </d-select>
    </div>
  </div>
  <div class="row">
    <div class="col-md-5">
      <pre>Current Select: {{ currentOption5 | json }}</pre>
    </div>
  </div>
</section>
